<template>
  <el-row :gutter="24">
    <el-dialog
      title="授权"
      :visible.sync="$store.state.user.AuthorizationOpen"
      width="800px"
      height="800"
      :before-close="closeOpen"
    >
      <!-- 授权上传文件 -->
      <License ref="Authorization" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOpen">取 消</el-button>
        <el-button type="primary" @click="closeOpen">确 定</el-button>
      </span>
    </el-dialog>

    <el-col :span="24">
      <div class="banner">
        <img src="@/assets/images/home_portal.png" class="dy-img" alt />
      </div>
    </el-col>

    <el-col :span="16">
      <div :v-loading="listLoading" style="height: 0">&nbsp;</div>
      <div class="content">
        <!-- <draggable
          v-model="list"
          chosenClass="chosen"
          forceFallback="true"
          group="people"
          animation="200"
          @start="onStart"
          @end="onEnd"
        >-->
        <transition-group
          :style="{
            display: 'flex',
            'flex-wrap': 'wrap',
            height: 'calc(65vh / 7)',
          }"
        >
          <div
            v-for="(i, idx) in list"
            :key="i.id"
            :value="i.id"
            class="items item"
            :style="`background:${iconColor(i, idx)} ;cursor:${
              i.enabledMark ? 'pointer' : 'no-drop'
            }`"
            @click="clickItem(i)"
          >
            <!--:style="`background:${iconColor(i)} ;`" -->
            <i :class="i.icon" style="font-size: 26px"></i>
            <span style="line-height: 18px">{{ i.fullName }}</span>
          </div>
        </transition-group>
        <!-- </draggable> -->
      </div>
    </el-col>
    <el-col :span="8">
      <div class="login-box" v-if="isLogin">
        <div class="login-content">
          <div class="login-form">
            <img class="login-logo" src="@/assets/images/login_logo.png" alt />
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="账户登录" name="1"></el-tab-pane>
              <el-tab-pane label="企微登录" name="2"></el-tab-pane>
              <el-tab-pane label="钉钉登录" name="3"></el-tab-pane>
            </el-tabs> -->
            <div class="login-tab" :class="'active' + active">
              <a
                class="tab_item"
                :class="{ active: active == 1 }"
                @click="active = 1"
                >{{ $t("login.title") }}</a
              >
              <a
                class="tab_item"
                :class="{ active: active == 2 }"
                @click="
                  active = 2;
                  queryWeComInfo();
                "
                >{{ $t("login.scanTitle") }}
              </a>
              <a
                class="tab_item"
                :class="{ active: active == 3 }"
                @click="
                  active = 3;
                  loadDingQrImage();
                "
                >{{ $t("login.dingTitle") }}
              </a>
            </div>
            <el-form
              v-show="active == 1"
              ref="loginForm"
              :model="loginForm"
              :rules="loginRules"
              autocomplete="on"
              label-position="left"
              label-width="68px"
              style="padding: 0 8px; text-align: center"
            >
              <el-form-item label="用户名" prop="account">
                <el-input
                  ref="account"
                  v-model="loginForm.account"
                  :placeholder="$t('login.username')"
                  name="account"
                  type="text"
                  tabindex="1"
                  autocomplete="on"
                  prefix-icon="el-icon-user"
                  size="small"
                  @change="getConfig"
                ></el-input>
              </el-form-item>

              <el-form-item prop="password" label="密 码">
                <el-input
                  ref="password"
                  v-model="loginForm.password"
                  show-password
                  :placeholder="$t('login.password')"
                  name="password"
                  tabindex="2"
                  autocomplete="on"
                  @keyup.native="checkCapslock"
                  @blur="capsTooltip = false"
                  prefix-icon="el-icon-lock"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                class="login-btn"
                size="large"
                @click.native.prevent="handleLogin"
                >{{ $t("login.logIn") }}</el-button
              >
            </el-form>
            <div v-show="active == 2" class="login-form-QRCode">
              <div class="selectDeep">
                <el-select
                  v-model="qyhCorpId"
                  placeholder="请选择"
                  @change="loadWeComQrImage"
                >
                  <el-option
                    v-for="item in qyChatList"
                    :key="item.qyhCorpId"
                    :label="item.name"
                    :value="item.qyhCorpId"
                  >
                  </el-option>
                </el-select>
              </div>
              <div>
                <span id="qr_login"> </span>
              </div>
            </div>
            <!-- <div v-show="active == 3" class="login-form-QRCode">
              <span id="ding_login" />
            </div> -->
            <div
              id="self_defined_element"
              v-show="active == 3"
              class="self-defined-classname"
            ></div>
          </div>
        </div>
      </div>
      <transition name="el-zoom-in-top">
        <div class="login_okstyle" v-if="!isLogin">
          <div class="userInfo" v-if="!isLogin">
            <span @click="logoutHandle">[ 退出 ]</span>
          </div>
          <p class="title">您好！{{ userInfo.userName }}</p>
          <div class="userInfo-content">
            <img
              v-if="!userInfo.headIcon"
              class="login-logo"
              src="@/assets/images/default_avatar.png"
              alt
            />

            <img v-else :src="define.comUrl + userInfo.headIcon" alt />
            <div class="Pbox">
              所属组织:
              <p>{{ userInfo.departmentName }}</p>
            </div>

            <div class="Pbox">
              角色:
              <p>{{ userInfo.roleName }}</p>
            </div>
            <div class="Pbox">
              登录时间:
              <p>{{ jsbos.toDate(userInfo.prevLoginTime) }}</p>
            </div>

            <!-- <div class="Pbox">
              登录地址:
              <p>{{ userInfo.prevLoginIPAddressName }}</p>
            </div>
            <div class="Pbox">
              登录IP:
              <p>{{ userInfo.prevLoginIPAddress }}</p>
            </div> -->
          </div>
        </div>
      </transition>
    </el-col>

    <div class="sysconfig">
      <p>{{ sysConfig.copyright }}</p>
    </div>
  </el-row>
</template>

<!-- <script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script> -->
<!-- <script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script> -->
<script>
import "./ddlogin.js";
// import "https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js";
import {
  getConfig,
  getQyhConfig,
  getInfo,
  getLicenseInfo,
  getSystemAddress,
} from "@/api/user";
import { listAll } from "@/api/system/menu";
import draggable from "vuedraggable";
// import draggable from "ddlogin.js";
import Backlogs from "./components/backlog.vue";
import Piker from "./components/datecalendar.vue";
import { resetRouter } from "@/router";
import License from "./components/license.vue";
export default {
  name: "Logins",
  components: {
    draggable,
    Backlogs,
    Piker,

    License,
  },
  data() {
    return {
      qyhCorpId: "",
      qyChatList: [],
      QYHConfig: {},
      userInfo: {},
      isLogin: true,
      ifScanCode: 0,
      loginForm: {
        account: "",
        password: "",
        code: "",
        origin: "password",
      },
      list: [],
      loginRules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.accountTip"),
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",

            message: this.$t("login.passwordTip"),
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",

            message: this.$t("login.codeTip"),
          },
        ],
      },
      imgUrl: "",
      timestamp: "",
      capsTooltip: false,
      loading: false,
      showDialog: false,
      needCode: false,
      codeLength: 4,
      redirect: undefined,
      showTxt: false,
      otherQuery: {},
      active: 1,
      drag: false,
      listLoading: true,
      colorList: [
        "linear-gradient(47.84deg, rgb(215, 93, 100) 8.67%, rgb(223, 115, 81) 58.32%)",
        "linear-gradient(47.49deg, rgb(219, 129, 87) 11.68%, rgb(230, 167, 92) 96.17%)",
        "linear-gradient(20.75deg, rgb(223, 169, 64) 32.46%, rgb(239, 195, 81) 87.18%)",
        "linear-gradient(217.93deg, rgb(131, 204, 102) 7.26%, rgb(83, 192, 133) 100%)",
        "linear-gradient(211.04deg, rgb(61, 194, 146) 15.03%, rgb(60, 168, 129) 70.53%)",
        "linear-gradient(206.57deg, rgb(107, 202, 207) 18.52%, rgb(82, 179, 192) 85.65%)",
        "linear-gradient(30.1deg, rgb(92, 167, 222) 20.36%, rgb(144, 191, 234) 89.21%)",
        "linear-gradient(222.32deg, rgb(100, 162, 241) 5.23%, rgb(70, 94, 223) 91.4%)",
        "linear-gradient(225deg, rgb(144, 97, 242) 0%, rgb(117, 161, 227) 100%)",
        "linear-gradient(208.86deg, rgb(185, 114, 199) 21.43%, rgb(136, 114, 199) 95.56%)",
      ],
    };
  },
  computed: {
    sysConfig() {
      return this.$store.state.settings.sysConfig;
    },
    loginLoading() {
      return this.$store.state.user.loginLoading;
    },
  },
  watch: {
    "$route.query": {
      handler(newVal, oldVal) {
        var code = this.$route.query["code"];
        if (code) {
          this.qywxLoginByCode(code);
        }
      },
    },

    loginLoading(val) {
      if (!val) this.loading = false;
    },
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          //无路由不能跳重定向

          this.redirect = "/";
          this.otherQuery = this.getOtherQuery(query);
        }
      },

      immediate: true,
    },
  },
  created() {
    // 判断是否微信浏览器打开
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf("micromessenger") !== -1;
    if (isWeixin) {
      const code = this.getUrlParam("code");
      if (code) {
        // 重定向（重新加载一次该页面第二次获取到code）
        this.qywxLoginByCode(code);
      } else {
        // 获取code(临时授权码)
        this.getCode();
      }
    }

    const _this = this;
    document.onkeydown = function (e) {
      const { keyCode } = e;
      if (keyCode === 13) {
        _this.handleLogin();
      }
    };
    if (this.needCode) this.changeImg();
    // 获取系统列表
    this.getSystemList();
    this.getLicense();
  },
  mounted() {
    // getInfo().then((res) => {
    //   console.log(res);
    // });
    // 判断是否存在user

    if (this.$store.getters.userInfo && this.$store.getters.token) {
      this.userInfo = this.$store.getters.userInfo;
      this.isLogin = false;
    }
    this.$store.commit("user/SET_LOGIN_LOADING", false);
    this.setShowTxt();
    window.onresize = () => {
      this.setShowTxt();
    };
    this.qyhCorpId = this.$route.query.qyhCorpId;
    this.$store.commit("user/SET_CROPID", this.$route.query.qyhCorpId);
    console.log(this.$store.getters.qyhCorpId);
  },
  destroyed() {
    document.onkeydown = function (e) {
      const { keyCode } = e;
      if (keyCode === 13) {
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      this.active = tab;
      if (tab == "1") {
      }
      if (tab == "2") {
        this.loadWeComQrImage();
      }
      if (tab == "3") {
        this.loadDingQrImage();
      }
    },
    iconColor(systemEl, idx) {
      var color = JSON.parse(systemEl.propertyJson);

      if (!systemEl.enabledMark) {
        color = `#999999`;
        return color;
      }
      //  console.log(systemEl);
      //    console.log(color);
      if (!color || !color.iconBackgroundColor) {
        color = this.colorList[idx % 10];
      } else {
        // console.log();
        color = `linear-gradient(-30.54deg, ${color.iconBackgroundColor}90 8.67%, ${color.iconBackgroundColor} 58.32%)`;
      }
      return color;
    },
    getSystemList() {
      this.loadingHandle(true);
      listAll({ category: "Web", type: "0" })
        .then((res) => {
          this.loadingHandle(false);
          console.log(res);
          this.list = res.data.list;
        })
        .catch(() => {
          this.loadingHandle(false);
        });
    },
    setShowTxt() {
      if (document.documentElement.clientHeight <= 840) {
        this.showTxt = false;
      } else {
        this.showTxt = true;
      }
    },
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    getConfig(val) {
      if (!val) return;

      getConfig(this.loginForm.account).then((res) => {
        this.needCode = !!res.data.enableVerificationCode;
        if (this.needCode) {
          this.codeLength = res.data.verificationCodeNumber || 4;
          this.changeImg();
        }
      });
    },
    handleLogin() {
      if (this.loading) return;

      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store.commit("user/SET_LOGIN_LOADING", true);
          const query = {
            ...this.loginForm,

            timestamp: this.timestamp,
          };
          this.$store
            .dispatch("user/login", query)

            .then((res) => {
              getInfo().then((res) => {
                this.$store.commit("user/SET_SYSTEMLIST", res.data.systemList);
                this.userInfo = res.data.userInfo;
                this.$message.success("登录成功！");
                this.loading = false;

                this.isLogin = false;
              });

              // console.log("this.isLogin", this.isLogin);
            })
            .catch(() => {
              this.$store.commit("user/SET_LOGIN_LOADING", false);
            });
        } else {
          return false;
        }
      });
    },
    // item盒子点击
    async clickItem(i) {
      if (i.enabledMark == 0) {
        this.$message.warning("系统暂时禁用！");
        return;
      }
      let items = i;
      if (
        items.linkTarget == "_blank" &&
        items.urlAddress.indexOf("http") != -1
      ) {
        window.open(items.urlAddress);
        return;
      }
      if (!this.isLogin) {
        // 判断点击的是否有权限

        var sysList = this.$store.getters.systemList.map((i) => i.id);

        if (sysList.includes(i.id)) {
          //清除导航菜单

          this.$store.dispatch("tagsView/closeAll");
          //重新获取系统菜单

          this.$store.dispatch("user/getInfo", i.id).then(async (res) => {
            resetRouter();
            const accessRoutes = await this.$store.dispatch(
              "permission/generateRoutes",
              res
            );

            console.log(
              "items.urlAddress",
              items.urlAddress,
              "accessRoutes",
              accessRoutes
            );
            //判断首页
            if (items.urlAddress && items.linkTarget == "_self") {
              //  console.log("1111111111111111111", accessRoutes);
              accessRoutes.forEach((el) => {
                if (el.path == "/" + items.urlAddress) {
                  accessRoutes[0].redirect = "/" + items.urlAddress;
                }
                if (el.children && el.children.length != 0) {
                  el.children.forEach((ele) => {
                    if (ele.path == "/" + items.urlAddress) {
                      accessRoutes[0].redirect = "/" + items.urlAddress;
                    }

                    if (ele.children && ele.children.length != 0) {
                      ele.children.forEach((elee) => {
                        if (elee.path == "/" + items.urlAddress) {
                          accessRoutes[0].redirect = "/" + items.urlAddress;
                        }
                      });
                    }
                  });
                }
              });
            }
            // dynamically add accessible routes
            this.$router.addRoutes(accessRoutes);
            // 判断界面是子系统还是外链
            // 当前list中没有判断linkTarget参数，需要store中取
            if (
              items.linkTarget == "_self" &&
              items.urlAddress.indexOf("http") == -1
            ) {
              // 站内跳转
              this.$router.push({
                path: this.redirect || "/",
                query: { applicationId: i.id },
              });
            } else {
              this.$message.warning("站内及外链配置无效");
            }
          });
        } else {
          this.$message.warning("没有该系统权限");
        }
      } else {
        this.$message.warning("请登录后重试");
      }
    },
    // 点击方法 url为传入的第三方链接或网址 如'www.baidu.com' url前面不要加协议哦！
    jumpUrl(url) {
      let path = window.location.protocol + "//" + url;
      window.open(path);
    },

    changeImg() {
      let timestamp = Math.random();
      this.timestamp = timestamp;
      this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`;
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },

    /**根据code参数获得企业员工的corpid与userid 实现自动登录 */
    qywxLoginByCode(code) {
      const _stateArr = this.getStateAll();
      let _qyhCorpId = _stateArr.corpId;
      let _qyhAgentId = _stateArr.agentId;
      localStorage.setItem("_qyhCorpId", _qyhCorpId);
      localStorage.setItem("_qyhAgentId", _qyhAgentId);
      console.log("======", _qyhCorpId, _qyhAgentId);
      this.loading = true;
      this.$store.commit("user/SET_LOGIN_LOADING", true);
      this.qyhCorpId = _qyhCorpId;
      const paramCode = {
        code: code,
        qyhCorpId: _qyhCorpId,
        qyhAgentId: _qyhAgentId,
      };
      this.$store
        .dispatch("user/loginByWeCom", paramCode)
        .then((res) => {
          getInfo().then((res) => {
            this.$store.commit("user/SET_SYSTEMLIST", res.data.systemList);
            this.userInfo = res.data.userInfo;
            this.$message.success("登录成功！");
            this.loading = false;
            this.isLogin = false;
          });
        })
        .catch(() => {
          this.loading = false;
          this.$store.commit("user/SET_LOGIN_LOADING", false);
        });
    },
    /**构造网页授权链接 获取code */
    getCode() {
      // 获取路径参数
      const query = this.$route.query;
      let _qyhCorpId = "";
      let _qyhAgentId = "";
      if (query.qyhCorpId) {
        _qyhCorpId = query.qyhCorpId;
      } else if (localStorage.getItem("_qyhCorpId")) {
        _qyhCorpId = localStorage.getItem("_qyhCorpId");
      }
      if (query.qyhAgentId) {
        _qyhAgentId = query.qyhAgentId;
      } else if (localStorage.getItem("_qyhAgentId")) {
        _qyhAgentId = localStorage.getItem("_qyhAgentId");
      }
      let redirect_uri = "";
      this.qyhCorpId = _qyhCorpId;
      if (_qyhCorpId && _qyhAgentId) {
        getSystemAddress("pc").then((res) => {
          redirect_uri = encodeURIComponent(res.msg);
          const url = "https://open.weixin.qq.com/connect/oauth2/authorize";
          const wx_url = `${url}?appid=${_qyhCorpId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=${_qyhCorpId}_${_qyhAgentId}&agentid=${_qyhAgentId}#wechat_redirect`;
          window.location.replace(wx_url);
        });
      } else {
        this.$message.warning("缺少自动登录必要参数，请手动或扫码登录。");
      }
    },

    //获取地址栏url后的参数值
    getQyhConfigHandler() {
      // 获取的url动态
      var config = {
        config: "WeComConfig",
      };
      getQyhConfig(config)
        .then((res) => {
          this.QYHConfig = res.data;
        })
        .catch((err) => console.log(err));
    },
    //获取地址栏url后的参数值
    getUrlParam(key) {
      var href = window.location.href;
      var url = href.split("?");
      if (url.length <= 1) {
        return "";
      }
      var params = url[1].split("&");

      for (var i = 0; i < params.length; i++) {
        var param = params[i].split("=");
        if (key == param[0]) {
          return param[1];
        }
      }
    },
    /**解析企业微信扫码或自动登录回调地址携带state参数 */
    getStateAll() {
      const _state = this.getUrlParam("state"); // wwc0366cea7d993696_1000034 或 wwc0366cea7d993696_1000034#/login
      console.log("statestatestate", _state);
      const _stateArr = _state.split("#")[0].split("_");
      return {
        corpId: _stateArr[0],
        agentId: _stateArr[1],
      };
    },
    /**获取企业微信公司配置 */
    queryWeComInfo() {
      getQyhConfig()
        .then((res) => {
          if (this.$isEmpty(res.data)) {
            this.$message.warning("企业微信配置为空");
          } else {
            this.qyChatList = res.data;
            console.log("----", this.qyChatList);
            this.loadWeComQrImage();
          }
        })
        .catch((err) => console.log(err));
    },
    /**加载企业微信二维码 */
    loadWeComQrImage() {
      console.log("----", this.qyChatList);
      if (this.qyhCorpId && !this.$isEmpty(this.qyhCorpId)) {
        this.QYHConfig = this.qyChatList.filter((v) => {
          return v.qyhCorpId == this.qyhCorpId;
        })[0];
      } else {
        this.QYHConfig = this.qyChatList[0];
        this.qyhCorpId = this.QYHConfig.qyhCorpId;
      }

      new WwLogin({
        id: "qr_login",
        appid: this.QYHConfig.qyhCorpId,
        agentid: this.QYHConfig.qyhAgentId,
        redirect_uri: encodeURIComponent(this.QYHConfig.qyhComputerUrl),
        state: this.QYHConfig.qyhCorpId + "_" + this.QYHConfig.qyhAgentId,
        href: "",
        lang: "zh",
        // panel_size: "small",
      });

      document.getElementById("qr_login").childNodes[0].style.width = "180px";
      document.getElementById("qr_login").childNodes[0].style.height = "310px";
    },

    loadDingQrImage() {
      // STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
      var res = window.DTFrameLogin(
        {
          id: "self_defined_element",
          width: "300px",
          height: "300px",
        },
        {
          redirect_uri: encodeURIComponent(
            // "http://192.168.1.16:3000/#/login-home-portal"
            "http://192.168.1.16:3000/#/login"
          ),
          client_id: "dingqgbtl0pzm45qbonu",
          scope: "openid",
          response_type: "code",
          state:
            "account: '',origin: '',codeDing: code,timestamp: Math.random(),client_id: 'admin',client_secret: '123456',scope: 'all',grant_type: 'WeCom'",
          prompt: "consent",
        },
        (loginResult) => {
          const { redirectUrl, authCode, state } = loginResult;
          this.dingLoginByCode(authCode);
          // 这里可以直接进行重定向
          // window.location.href = redirectUrl;
          // 也可以在不跳转页面的情况下，使用code进行授权
          console.log("1111111113333", redirectUrl);
        },
        (errorMsg) => {
          // 这里一般需要展示登录失败的具体原因
          alert(`Login Error: ${errorMsg}`);
        }
      );
      console.log("1111", res);
    },

    dingLoginByCode(code) {
      this.loading = true;
      this.$store.commit("user/SET_LOGIN_LOADING", true);

      this.$store
        .dispatch("user/loginByDingCom", code)
        .then((res) => {
          getInfo().then((res) => {
            this.$store.commit("user/SET_SYSTEMLIST", res.data.systemList);
            this.userInfo = res.data.userInfo;
            this.$message.success("登录成功！");
            this.loading = false;
            this.isLogin = false;
          });
        })
        .catch(() => {
          this.loading = false;
          this.$store.commit("user/SET_LOGIN_LOADING", false);
        });
    },
    closeOpen() {
      this.$store.commit("user/SET_AUTHORIZATIONOPEN", false);
    },
    getLicense() {
      getLicenseInfo().then((res) => {
        if (!res.data.isExist || res.code == "603") {
          this.$store.commit("user/SET_AUTHORIZATIONOPEN", true);
        }
      });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    logoutHandle() {
      // 退出
      this.$store.dispatch("user/logout").then((res) => {
        this.$message.success("退出成功！");
        this.isLogin = true;
        setTimeout(() => {
          if (this.active == 2) {
            this.loadWeComQrImage();
          }
        }, 1000);
      });
    },
    loadingHandle(e) {
      const loading = this.$loading({
        lock: true,
        text: "系统加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (e == false) {
        loading.close();
        return;
      }
    },
    getQueryString(url) {
      var regex = /[?#]([^?#]+)/g;
      var match = url.match(regex);
      return match ? match[0] : "";
    },
  },
};
</script>

<style lang="scss" scoped>
// banner
.userInfo-content {
  .Pbox {
    width: 80%;
    line-height: 50px;
    height: 50px;
    margin-left: 10%;
    font-size: 16px;
    color: #000;
  }

  p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: right;
    width: 70%;
    color: #666;
  }

  img {
    margin: 20px auto;
    display: block;
    width: 60px;
    height: 60px;
  }
}

.banner {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 35vh;

  .dy-img {
    width: 100%;
    height: 35vh;
    margin: 0 auto;
  }
}

// 登录前form
.login-box {
  padding-top: 30px;

  width: 37rem;
  // height: 42rem;
  box-shadow: 0px 0px 3px #ccc;
  box-sizing: border-box;
  background-color: white;
  border-radius: 12px;
  color: white;
  background-color: #ffffff;
  box-sizing: border-box;
  margin: 0 0 0 60px;
  overflow: hidden;
  font-size: 0;

  .login-logo {
    margin-top: 10px;
    width: 100%;
  }
}

// 登录处样式
.login-content {
  height: 100%;
  // flex-shrink: 0;
  display: flex;
  justify-content: center;
  position: relative;

  .login-cap {
    font-size: 20px;
    line-height: 30px;
    color: #666666;
  }
}

.login-tab {
  height: 58px;
  margin-bottom: 30px;
  position: relative;
  border-bottom: 1px solid #dcdfe6;

  &::after {
    position: absolute;
    left: 0;
    width: 33%;
    height: 2px;
    content: "";
    display: block;
    bottom: -1px;
    background-color: #1890ff;
    z-index: 100;
    transition: 0.5s;
  }

  &.active1 {
    &::after {
      left: 0%;
    }
  }

  &.active2 {
    &::after {
      left: 33%;
    }
  }

  &.active3 {
    &::after {
      left: 66%;
    }
  }

  .tab_item {
    position: relative;
    width: 33%;
    line-height: 58px;
    color: #666;
    display: inline-block;
    height: 58px;
    text-align: center;

    &.active {
      color: #1890ff;
    }
  }
}

.tab_item {
  position: relative;
  width: 50%;
  font-size: 14px;
  line-height: 58px;
  color: #666;
  display: inline-block;
  height: 58px;
  text-align: center;

  &.active {
    color: #1890ff;
  }
}

.login-form-QRCode {
  width: 100%;
  text-align: center;

  .qrcode-img {
    position: relative;
    margin-bottom: 18px;
  }

  .qrcode-tip {
    color: #334d65;
    line-height: 22px;
    font-size: 16px;
    text-align: center;
  }
}

.login-foot {
  position: absolute;
  width: 1060px;
  color: #999;
  font-size: 12px;
  position: fixed;
  bottom: 20px;
  left: 31%;
  text-align: left;
}

.login-btn {
  width: 300px;
  font-size: 16px;
  margin-bottom: 40px;
  margin-top: 10px;
}

// 登录后

.login_okstyle {
  padding-top: 10px;
  position: relative;
  width: 37rem;
  height: 38rem;
  box-shadow: 0px 0px 3px #ccc;
  box-sizing: border-box;
  background-color: white;
  border-radius: 12px;
  color: white;
  background-color: #ffffff;
  box-sizing: border-box;
  margin: 0 0 0 60px;
  overflow: hidden;
  font-size: 0;

  .title {
    // padding: 12px;
    font-size: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-size: 16px;
    color: rgb(122, 137, 146);
    text-align: center;
    background-color: white;
    margin-bottom: 10px;
    // box-sizing: border-box;
  }
}

// .login_okstyle {

//   box-sizing: border-box;
//   height: 100%;
//   max-height: 30rem;
//   color: #3f3f3f;
//   width: 25rem;
//   border-top-left-radius: 12px;
//   border-top-right-radius: 12px;
//   margin: -200px 0 0 60px;
//   z-index: 99;
//   background-color: rgb(241, 242, 243);
//   padding-bottom: 5px;
//   position: relative;

//   .title {
//     padding: 12px;
//     font-size: 12px;
//     border-top-left-radius: 12px;
//     border-top-right-radius: 12px;
//     font-size: 16px;
//     color: rgb(122, 137, 146);
//     text-align: center;
//     background-color: white;
//     margin-bottom: 10px;
//   }

//   .date {
//     margin-bottom: 10px;
//     background-color: white;
//     height: 220px;
//   }
// }

// content
.content {
  // width: 80%;
  box-sizing: border-box;
  margin: 0 0 0 90px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  // min-width: 70vw;
  font-size: 1rem;
  line-height: 20px;

  .items {
    cursor: pointer;
    float: left;

    height: calc(65vh / 7);
    min-height: 4rem;
    max-height: 120px;
    width: 120px;
    margin: 0px 12px 12px 0;
    border-radius: 8px;
    background-color: rgb(157, 187, 132);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .items:nth-child(2n) {
    background-color: rgb(182, 182, 255);
    min-width: 180px;
    flex: 1;
  }

  .items:nth-child(3n) {
    background-color: rgb(29, 200, 149);
  }

  .items:nth-child(4n) {
    background-color: rgb(0, 191, 191);
  }

  .items:nth-child(5n) {
    background-color: rgb(194, 128, 255);
    min-width: 140px;
  }

  .items:nth-child(7n) {
    background-color: rgb(191, 191, 0);
    flex: 1;

    min-width: 140px;
  }

  .items:nth-child(8n) {
    background-color: rgb(245, 154, 35);
    flex: 1;
  }

  .items:nth-child(9n) {
    background-color: rgb(128, 128, 0);

    min-width: 180px;
  }

  .items:nth-child(10n) {
    background-color: rgb(128, 128, 255);
    min-width: 200px;
  }

  .items:nth-child(11n) {
    background-color: rgb(75, 120, 2);

    min-width: 120px;
    flex: 1;
  }
}

// 底部样式
.sysconfig {
  position: fixed;
  bottom: 0;
  height: 50px;
  z-index: 999;
  line-height: 40px;
  background-color: rgb(255, 255, 255);
  width: 100%;
  text-align: center;
  border-top: 1px solid #e6e3e3;
  color: #b3b2b2;
  padding-top: 3px;
}

.userInfo {
  position: absolute;
  top: 11px;
  right: 15px;

  span {
    font-size: 0px;
    color: white;
  }

  span:nth-child(1n) {
    font-size: 14px;
    color: rgb(144, 210, 251);
    cursor: pointer;
  }
}

.el-row {
  height: 92%;
  overflow-y: auto;
  margin-left: 0 !important;
  margin-right: 0 !important;

  .el-col {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
}

.self-defined-classname {
  width: 300px;
  height: 300px;
  margin-left: 20%;
}

/* 利用穿透，设置input边框隐藏 */
.selectDeep >>> .el-input__inner {
  border: 0;
}
</style>
